<template>
  <div class="addline">
     <el-form label-position="right" label-width="120px" :model="addData" :rules="rules" ref="addData"  class="demo-ruleForm">
       <el-form-item label="设计人:">
          <p>大哥</p>
       </el-form-item>
       <el-form-item class="add_item" label="选则站点:">
         <div>
           <el-button @click="allSite()" class="mg_l15" type="primary">选择线路所有站点</el-button>
         </div>
       </el-form-item>
       <el-form-item class="add_item_img"  label="">
         <draggable v-model="imgList" @update="datadragEnd" :options = "{animation:500}" v-if="!imgList.length == 0">
           <div v-for="(item,index) in imgList" :key="index" v-on:mouseenter="iconFlag.splice(index,1,true)" v-on:mouseleave="iconFlag.splice(index,1,false)" class="addline_img_list relative mg_r10">
             <img class="addline_img" :src="item.img" alt="星旅">
             <i @click="seeImg(item.img)" v-if="iconFlag[index]" class="addline_i_1 el-icon-zoom-in"></i>
             <i @click="deleteImg(index,item.aid)" v-if="iconFlag[index]" class="addline_i_2 el-icon-delete"></i>
             <span v-if="iconFlag[index]" class="addline_mask"></span>
             <p class="add_spotname fcc"><span class="f_15">{{index+1}}:</span><span>{{item.name}}</span></p>
           </div>
         </draggable>
       </el-form-item>

       <el-form-item class="add_item" label="线路名称:" prop="name">
          <el-col :span="8">
             <el-input v-model.trim="addData.name"></el-input>
          </el-col>
          <el-col :span="12">
             <el-form-item class="" label="线路总里程:" prop="mileage">
                <el-input v-model.trim="addData.mileage" type="number"></el-input>
             </el-form-item>
          </el-col>
       </el-form-item>
       <el-form-item>
         <span>
          <el-button @click="isAddLine('addData')" type="primary">确定</el-button>
         </span>
       </el-form-item>
     </el-form>

     <el-dialog
      title="选择线路所有站点"
      :visible.sync="centerDialogVisible"
      width="60%"
      center>
      <div>
        <div class="add_bort">
          <div class="add_dialog_item fsc">
            <p>乡村库</p>
            <p><el-button v-show="show.show1?index<siteList.type1.length:index<30" @click="addActive(index,1)" :type="type1[index]?'primary':''"  v-for="(item,index) in siteList.type1" :key="index">{{item.spotname}}</el-button></p>
          </div>
          <div v-show="isMore(1)" @click="more(1)" class="fcc f_16 c_green mg_t20">查看更多</div>
        </div>
        <div class="add_bort">
          <div class="add_dialog_item fsc">
            <p>乡宿库</p>
            <p><el-button v-show="show.show2?index<siteList.type2.length:index<30" @click="addActive(index,2)" :type="type2[index]?'primary':''"  v-for="(item,index) in siteList.type2" :key="index">{{item.spotname}}</el-button></p>
          </div>
          <div v-show="isMore(2)"  @click="more(2)" class="fcc f_16 c_green mg_t20">查看更多</div>
        </div>
        <div class="add_bort">
          <div class="add_dialog_item fsc">
            <p>乡味库</p>
            <p><el-button v-show="show.show3?index<siteList.type3.length:index<30" @click="addActive(index,3)" :type="type3[index]?'primary':''"  v-for="(item,index) in siteList.type3" :key="index">{{item.spotname}}</el-button></p>
          </div>
          <div v-show="isMore(3)"  @click="more(3)" class="fcc f_16 c_green mg_t20">查看更多</div>
        </div>
        <!--<div class="add_bort">
          <div class="add_dialog_item fsc">
            <p>民俗库</p>
            <p><el-button v-show="show.show4?index<siteList.type4.length:index<30" @click="addActive(index,4)" :type="type4[index]?'primary': ''"  v-for="(item,index) in siteList.type4" :key="index">{{item.spotname}}</el-button></p>
          </div>
          <div v-show="isMore(4)" @click="more(4)" class="fcc f_16 c_green mg_t20">查看更多</div>
        </div>-->
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="图片"
      :visible.sync="seeImgDialog"
      width="650px"
      center>
      <p class="t_center">
        <img width="100%" :src="imgUrl" alt="星旅">
      </p>
    </el-dialog>
  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  export default {
    data() {
      return {
        show: {         //站点折叠
          show1: false,
          show2: false,
          show3: false,
          show4: false
        },
        // startArr:[],
        // endArr:[],
        // count:0,


        type1: [],   //乡村选择
        type2: [],   
        type3: [],
        type4: [],
        aid: [],
        seeImgDialog: false,
        iconFlag: [],    //判断img的mask隐藏/显示
        imgList: [],
        imgUrl: '',
        centerDialogVisible: false, //打开线路站点
        addData: {
          linesId:[],
          mileage: '',
          aid: '',
          name: '',
        },
        
        dialogVisible: false,
        dialogImageUrl: '',  //展开图片时的路径
        
        siteList: [],  //list数据
         
      rules: {
          name: [
            { required: true, message: '请输入乡村名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          mileage:[
            { required: true, message: '请填写', trigger: 'blur' }
          ],
        
        },
      }
    },
    mounted () {
      //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    },

    created() {
      this.isModify();
      this.init();
    },
    components: {
        draggable
    },
    methods: {
      datadragEnd (evt) {     //拖拽事件
        console.log(this.imgList)
        // evt.preventDefault();
        // console.log('拖动前的索引 :' + evt.oldIndex)
        // console.log('拖动后的索引 :' + evt.newIndex)
        // console.log(this.colors);
      },
      init() {
        let { aid } = this.$route.query;
        let url = '/admin/lines/get_circuit';
        let data = {
          aid,
        };
        this.$request.post(url,data).then(res=> {
          if(res.data.code == '0000') {
            let list = res.data.data.img;
            console.log(res)
            console.log(res.data.data.img);
            list.forEach((value,key)=> {
              console.log(value)
              let src = JSON.parse(value.images);
              let obj = {};
              obj['img'] = src[0];
              obj['name'] = value.spotname;
              obj['aid'] = value.id;
              this.imgList.push(obj);
            })
            let user = res.data.data.list;
            this.addData.mileage = user.mileage;
            this.addData.name = user.name;
            
          };
        })
        
      },
      more(num) {
        if(num == 1) {
          this.show.show1 = !this.show.show1
        }else if(num == 2) {
          this.show.show2 = !this.show.show2
        }else if(num == 3) {
          this.show.show3 = !this.show.show3
        }else if(num == 4) {
          this.show.show4 = !this.show.show4
        }
      },
      isMore(num) {
        if(num == 1 && this.siteList.type1) {
          if(this.siteList.type1.length>50) {
            return true;
          }
        }else if(num == 1) {
          return false
        }
        if(num == 2 && this.siteList.type2) {
          if(this.siteList.type1.length>50) {
            return true;
          }
        }else if(num == 2) {
          return false
        }
        if(num == 3 && this.siteList.type3) {
          if(this.siteList.type1.length>50) {
            return true;
          }
        }else if(num == 3) {
          return false
        }
        if(num == 4 && this.siteList.type4) {
          if(this.siteList.type1.length>50) {
            return true;
          }
        }else if(num == 4) {
          return false
        }
      },
      allSite() {      //选择站点
        let url = '/admin/lines/site';
        let data = {};
        this.$request.post(url,data).then(res=> {

          if(res.data.code == '0000') {
            console.log(res.data.data)
            let data1 = res.data.data;
            // this.addSite(res.data.data);
            let list = {};
            for(let key in data1) {
              // console.log(data1[key])
              list[key] = data1[key].list;
            }
            // console.log(list);
            this.siteList = list;
            this.addSite(list);
            
          }
        })
        this.centerDialogVisible = true;
       
      },

      seeImg(url) {
        this.imgUrl = url;
        this.seeImgDialog = true;
      },
      isModify() {     //修改线路传参
        if(this.$route.query.modify) {
          let lineLabel = JSON.parse(sessionStorage.getItem('lineLabel'));
          this.formLabelAlign = lineLabel;
          console.log(lineLabel)
        }
      },

      addActive(index,type) {     //点击添加高亮
        if(this.type1[index]&&type == 1) {
          let aid = this.siteList.type1[index].id;
          let index1 = this.imgList.findIndex(item=> {
            return item.aid == aid
          })
          this.imgList.splice(index1,1);
          this.type1.splice(index,1,!this.type1[index])
        }else if(type == 1) {
          this.type1.splice(index,1,!this.type1[index])
          let img = this.siteList.type1[index].images;
          let obj = {};
          obj['img'] = JSON.parse(img)[0];
          obj['name'] = this.siteList.type1[index].spotname;
          obj['aid'] = this.siteList.type1[index].id;
          this.imgList.push(obj)
        }
        if(this.type2[index] && type == 2) {
          let aid = this.siteList.type2[index].id;
          let index1 = this.imgList.findIndex(item=> {
            console.log(item)
            return item.aid == aid
          })
          this.imgList.splice(index1,1);
          this.type2.splice(index,1,!this.type2[index])
        }else if(type == 2) {
          this.type2.splice(index,1,!this.type2[index])
          let img = this.siteList.type2[index].images;
          let obj = {};
          obj['img'] = JSON.parse(img)[0];
          obj['name'] = this.siteList.type2[index].spotname;
          obj['aid'] = this.siteList.type2[index].id;
          this.imgList.push(obj)
        }
        if(this.type3[index] && type == 3) {
           let aid = this.siteList.type3[index].id;
           let index1 = this.imgList.findIndex(item=> {
             console.log(item)
             return item.aid == aid
           })
            this.imgList.splice(index1,1);
            this.type3.splice(index,1,!this.type3[index])
        }else if(type == 3) {
          this.type3.splice(index,1,!this.type3[index])
          let img = this.siteList.type3[index].images;
          let obj = {};
          obj['img'] = JSON.parse(img)[0];
          obj['name'] = this.siteList.type3[index].spotname;
          obj['aid'] = this.siteList.type3[index].id;
          this.imgList.push(obj)
        }
        if(this.type4[index] && type == 4) {
          let aid = this.siteList.type4[index].id;
          let index1 = this.imgList.findIndex(item=> {
            console.log(item)
            return item.aid == aid
          })
          this.imgList.splice(index1,1);
          this.type4.splice(index,1,!this.type4[index])
        }else if(type == 4) {
          this.type4.splice(index,1,!this.type4[index])
          let img = this.siteList.type4[index].images;
            let obj = {};
            obj['img'] = JSON.parse(img)[0];
            obj['name'] = this.siteList.type4[index].spotname;
            obj['aid'] = this.siteList.type4[index].id;
            this.imgList.push(obj)  
        }
        
      },
      deleteImg(index,aid) {              //删除图片
        console.log(index,aid)
        this.imgList.splice(index,1)
        
        let index1 = this.siteList.type1.findIndex(item=> {
          return item.id == aid;
        })
        let index2 = this.siteList.type2.findIndex(item=> {
          return item.id == aid;
        })
        let index3 = this.siteList.type3.findIndex(item=> {
          return item.id == aid;
        })
        let index4 = this.siteList.type4.findIndex(item=> {
          return item.id == aid;
        })
        console.log(index);
        if(index1 > -1) {
          this.type1.splice(index1,1,false)
        }else if(index2 > -1) {
          this.type2.splice(index2,1,false)
        }else if(index3 > -1) {
          this.type3.splice(index3,1,false)
        }else if(index4 > -1) {
          this.type4.splice(index4,1,false)
        }

      },  
      addSite(site) {
        for(let item of site.type1) {
          this.type1.push(false)
        }
        for(let item of site.type2) {
          this.type2.push(false)
        }
        for(let item of site.type3) {
          this.type3.push(false)
        }
        for(let item of site.type4) {
          this.type4.push(false)
        }
        console.log(site)
        this.imgList.forEach((value,key)=> {
          console.log(value.aid)
          let index1 = site.type1.findIndex(item=> {
            return item.id == value.aid;
          })
          let index2 = site.type2.findIndex(item=> {
            return item.id == value.aid;
          })
          let index3 = site.type3.findIndex(item=> {
            return item.id == value.aid;
          })
          let index4 = site.type4.findIndex(item=> {
            return item.id == value.aid;
          })
          if(index1 > -1) {
            this.type1.splice(index1,1,true);
          }else if(index2 > -1) {
            this.type2.splice(index2,1,true)
          }else if(index3 > -1) {
            this.type3.splice(index3,1,true)
          }else if(index4 > -1) {
            this.type4.splice(index4,1,true)
          }
          
        })
      },
      isAddLine(formName) {            //添加/修改线路
        let {aid} = this.$route.query;
        console.log(aid);
        this.imgList.forEach((value,key)=> {
          if(this.addData.linesId.indexOf(value.aid) < 0) {
            this.addData.linesId.push(value.aid);
          }
        })
        this.addData.aid = aid;
        let url = '/admin/lines/upLine';
        let data = this.addData;
        console.log(this.addData)
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$request.post(url,data).then(res=> {
                console.log(res)
                if(res.data.code == '0000') {
                  this.$message({
                    type: 'success',
                    message: '规划成功'
                  })
                  this.$router.push('/line/list')
                }else {
                  this.$message.error('规划失败')
                }
              }).catch(error=> {
                this.$$message.error('操作错误')
                console.log(error)
              })
            } else {
            console.log('error submit!!');
            return false;
            }
        });
      },

      handleRemove(file, fileList) {
         console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
         console.log(file)
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
      },
     
    
    }
  }
</script>
<style scoped lang="less">
  .add_item {
    width: 70%;
    .add_select {
       width: 50%;
       margin-right: 20px;
    }
  }
  .addline_img_list { 
    margin: 7px;
    display: inline-block;
    border-radius: 5px;
    .addline_mask {
      display: inline-block;
      width: 150px;
      height: 160px;
      background-color: #000;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 5px;
      z-index: 9;
    }
    .addline_i_1 {
      z-index: 10;
      font-size: 20px;
      position: absolute;
      color: #fff;
      top: 65px;
      left: 40px
    }
    .addline_i_2 {
      z-index: 10;
      font-size: 20px;
      position: absolute;
      color: #fff;
      top: 65px;
      left: 90px
    }
  }
  .addline_img {
    width: 150px;
    height: 160px;
  }
  .add_item_img {
   width: 80%;
  }
  .add_bort {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
  }
  .add_dialog_item {
    p:nth-child(1) {
      height: 100%;
      width: 100px
    }
    p:nth-child(2) {
      padding: 20px 0;
    }
    
  }
  .add_spotname {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    font-size: 16px;
    bottom: 14px;
    height: 30px;
    width: 150px;
    color: #fff;
    left: 0;
  }
</style>

